<!--  线 + 柱混合图 -->
<template>
    <el-card>
      <template #header>
        <div class="title">
          业绩柱状图
          <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
            <el-icon @click="downloadEchart"><Download /></el-icon>
          </el-tooltip>
        </div>
      </template>
  
      <div :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  
  const props = defineProps({
    id: {
      type: String,
      default: "barChart",
    },
    className: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "200px",
      required: true,
    },
    height: {
      type: String,
      default: "200px",
      required: true,
    },
  });
  
  const options = {
    grid: {
      left: "2%",
      right: "2%",
      bottom: "10%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      x: "center",
      y: "bottom",
      data: ["收入", "毛利润", "收入增长率", "利润增长率"],
      textStyle: {
        color: "#999",
      },
    },
    xAxis: [
      {
        type: "category",
        data: ["浙江", "北京", "上海", "广东", "深圳"],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 10000,
        interval: 2000,
        axisLabel: {
          formatter: "{value} ",
        },
      },
      {
        type: "value",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: "收入",
        type: "bar",
        data: [7000, 7100, 7200, 7300, 7400],
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
      },
      {
        name: "毛利润",
        type: "bar",
        data: [8000, 8200, 8400, 8600, 8800],
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#25d73c" },
            { offset: 0.5, color: "#1bc23d" },
            { offset: 1, color: "#179e61" },
          ]),
        },
      },
      {
        name: "收入增长率",
        type: "line",
        yAxisIndex: 1,
        data: [60, 65, 70, 75, 80],
        itemStyle: {
          color: "#67C23A",
        },
      },
      {
        name: "利润增长率",
        type: "line",
        yAxisIndex: 1,
        data: [70, 75, 80, 85, 90],
        itemStyle: {
          color: "#409EFF",
        },
      },
    ],
  };
  
  const downloadEchart = () => {
    // 获取画布图表地址信息
    const img = new Image();
    img.src = chart.value.getDataURL({
      type: "png",
      pixelRatio: 1,
      backgroundColor: "#fff",
    });
    // 当图片加载完成后，生成 URL 并下载
    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d");
      if (ctx) {
        ctx.drawImage(img, 0, 0, img.width, img.height);
        const link = document.createElement("a");
        link.download = `业绩柱状图.png`;
        link.href = canvas.toDataURL("image/png", 0.9);
        document.body.appendChild(link);
        link.click();
        link.remove();
      }
    };
  };
  
  const chart = ref<any>("");
  onMounted(() => {
    // 图表初始化
    chart.value = markRaw(
      echarts.init(document.getElementById(props.id) as HTMLDivElement)
    );
  
    chart.value.setOption(options);
  
    // 大小自适应
    window.addEventListener("resize", () => {
      chart.value.resize();
    });
  });
  
  onActivated(() => {
    if (chart.value) {
      chart.value.resize();
    }
  });
  </script>
  <style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
  
    .download {
      cursor: pointer;
  
      &:hover {
        color: #409eff;
      }
    }
  }
  </style>
  